<template>
  <input
    :type="type"
    class="inputStyle"
    :placeholder="placeholder"
    v-model="tellPhone"
    @change="updateData"
    :class="{
      success: Falg,
      error: !Falg
    }"
  />
</template>

<script>
export default {
  data() {
    return {
      tellPhone: '',
      Falg: false
    }
  },
  props: ['type', 'placeholder', 'rules', 'msg'],
  methods: {
    updateData() {
      if (this.Falg) {
        // this.$toast.success("验证成功")
      } else {
        this.$toast.fail(this.msg)
      }
    }
  },
  watch: {
    tellPhone(newdata) {
      this.$emit('input', newdata)

      if (this.rules.test(newdata)) {
        this.Falg = true
      } else {
        this.Falg = false
      }
    }
  }
}
</script>

<style lang="less" scoped>
.inputStyle {
  width: 100%;
  border: none;
  border-bottom: 2px solid #848484;
  outline: none;
  height: 50/360 * 100vw;
  padding-left: 20/360 * 100vw;
  background-color: #f2f2f2;
}
.success {
  border-bottom: 2px solid #06aa8f;
}
</style>
